<template>
    <div>
        <van-nav-bar title="购物车" />
        <van-skeleton title :row="3" v-show="gjp"/>
        <div v-for="item in cartData">
            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <div>
                            <van-checkbox v-model="item.checked"></van-checkbox>
                            <img :src="item.goods.goods_big_logo ? item.goods.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                alt="" style="width: 60px;height: 60px;">
                        </div>

                    </template>
                    <template #num>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />

                    </template>

                </van-card>


                <template #right>
                    <van-button square text="删除" type="danger" @click="declat(item.id)" class="delete-button" />
                </template>
            </van-swipe-cell>


        </div>


    </div>
    <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked">全选</van-checkbox>
        <template #tip><span @click="onClickLink">修改地址</span>
        </template>
    </van-submit-bar>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useCounterStore } from '@/stores/cart'
import { all } from 'axios'
import router from '@/router'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
console.log(store.cart)
let cartData = ref([])
const cart = () => {
    cartData.value = store.cart
}
cart()
const declat = (id) => {
    store.cart = store.cart.filter(item => item.id != id)
    cart()
}
let checked = computed({
    get() {
        if (cartData.value.length == 0) {
            return false
        }
        else {
            return cartData.value.every(item => item.checked)
        }

    },
    set(val) {
        console.log(val)
        cartData.value.filter(item => item.checked = val)

    }

})
let allprice = computed(() => {
    let allprice = ref(0)
    let ok = cartData.value.filter(item => item.checked)
    ok.forEach((item) => {
        allprice.value = item.number * item.goods.goods_price
    })
    return allprice.value * 100
})
// import { showSuccessToast, showFailToast } from 'vant';
// import { createApi } from '@/api/api'
// import { useRouter } from 'vue-router'
// const router=useRouter()
// let create = ref([])
// const onSubmit = () => {
//     let ok = cartData.value.filter(item => item.checked)
//     if(ok.length==0){
//         showFailToast('请选择商品')
//     }
//     else{
//         console.log(ok)
//         createApi({
//             goodsIds:ok.map(item=>item.goods.good_id).join(','),
//             username:localStorage.getItem('username'),
//             product_code:ok[0]+'等商品',
//             totalPrice:allprice.value,
//             nums:ok.map(item=>item.number),

//         }).then(res=>{
//             console.log(res)
//             router.push('/create/')

//         })
//     }


// }
const onSubmit=()=>{
    router.push('/create')
}
let gjp=ref(true)
setInterval(()=>{
    gjp.value=false
},1000)


</script>

<style lang="scss" scoped></style>